import React,{useState,useEffect} from 'react'
import { useParams, useRouteMatch } from 'react-router';

const Detail = (props) => {
    const para = useParams();
    const match = useRouteMatch
    console.log(match)
    console.log(para);
    // console.log(props);
    const [topic,setTopic] = useState({});
    useEffect(()=>{
        fetch('https://cnodejs.org/api/v1/topic/' + props.match.params.id)
        .then(res=>res.json())
        .then(res=>{
            console.log(res);
            res.data && setTopic(res.data);   //res.data存在时才更新状态
        })
        // .catch(err=>console.log(err))
    },[])
    return (
        <div>
            <ul>
                <li><img src={topic.author?.avatar_url} alt="" /></li>
                <li>{topic.author?.loginname}</li>
            </ul>
            <div dangerouslySetInnerHTML={{__html:topic.content}}></div>
        </div>
    )
}

export default Detail
